<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <style>
        *{
             margin: 0;
             padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
         $(function () {
             $("button").eq(0).click(function () {
                $("div").fadeIn(1000,function () {
                    alert("淡入完毕");
                });
             })
             $("button").eq(1).click(function () {
                $("div").fadeOut(1000,function () {
                     alert("淡出完毕");
                });
             })
             $("button").eq(2).click(function () {
                 $("div").fadeToggle(1000,function () {
                     alert("切换完毕");
                 });
             })
             $("button").eq(3).click(function () {
                 $("div").fadeTo(1000,0.5,function () {
                     alert("淡入到完毕");
                 });
             })
         })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>